<template>
	  <!-- 标签栏 -->
	<div class="tags-bar">
	  <ul>
		<li style="color:black;font-size: 16px;">{{ taglist.category }}:</li>
		<li v-for="(item, index) in taglist.list" :key="index" @click="tagBarClick(index, item)">
		  <span :class="{ active: currentIndex === index }">{{ item.name || item }}</span>
		</li>
	  </ul>
	</div>
  </template>
  
  <script setup>
  import { ref, defineProps, defineEmits } from 'vue';
  
  // 定义 props，接收数据
  const props = defineProps({
	taglist: {
	  type: Object,
	  default: () => ({}),
	},
  });
  
  // 定义 emits
  const emit = defineEmits(['tagBarClick']);
  
  // 定义响应式数据
  const currentIndex = ref(0);
  
  // 点击标签时的处理函数
  const tagBarClick = (index, item) => {
	currentIndex.value = index;
	emit('tagBarClick', item);
  };
  </script>
  
  <style lang="less" scoped>
  ul {
	display: flex;
	flex-wrap: wrap;
	padding-top: 15px;
	li {
	  padding: 3px 5px;
	  cursor: pointer;
	  &:hover {
		color: var(--mycompColor);
	  }
	  span {
		padding: 3px 5px;
	  }
	}
  }
  .active {
	color: var(--mycompColor);
	background: var(--tagRgba);
	border-radius: 5px;
  }
  </style>
  